<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>文件夹管理</title>

    <script src="js/jquery/jquery-3.2.1.min.js"></script>


    <!-- 附件预览 -->
    <script type="text/javascript" src="js/album/js/pdfobject.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/album/css/custom.css" />
    <script type="text/javascript" src="js/album/js/modernizr.custom.46884.js"></script>
    <link rel="stylesheet" type="text/css" href="js/album/css/slicebox.css" />
    <script type="text/javascript" src="js/album/js/jquery.slicebox.js"></script>
    <script type="text/javascript" src="js/album/js/preview.js"></script>
    <!--预览的3个文件-->
    <script src="js/jquery/jquery.media.js"></script>
    <link rel="stylesheet" type="text/css" href="js/magnify/dist/jquery.magnify.css" />
    <script type="text/javascript" src="js/magnify/dist/jquery.magnify.js"></script>



    <!-- layer -->
    <link rel="stylesheet" href="js/layer/layer/theme/default/layer.css">
    <script src="js/layer/layer/layer.js"></script>

    <!-- vue -->
    <script src="vue/vue.js"></script>
    <script src="vue/vue-resource.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header,
        .el-footer {

            text-align: center;
        }


        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        div.app {
            height: 100%;
        }
    </style>

</head>

<body>
    <div id="app" class="app">

        <el-container style="height: 100%;" size="mini">
            <el-header>
                <el-button type="primary" size="mini" @click="newFolder()">新建文件夹</el-button>
                <el-button type="primary" size="mini" @click="newExcel()">上传或新建excel</el-button>
                <br>
                <el-form label-width="80px">
                    <el-form-item label="路径">
                        <el-input v-model="path" @change="pathChange" size="mini"></el-input>
                    </el-form-item>

                </el-form>

            </el-header>
            <el-container>
                <el-aside width="200px">

                    <el-tree :data="folders" :default-expand-all="true" node-key="id" @node-click="handleNodeClick">
                    </el-tree>

                </el-aside>
                <el-main>
                    <div v-for="item in files" style="float: left; margin:20px;text-align:center;">

                        <img :src="'images/'+item.imageType+'.png'" style="width: 50px;height: 50px; "
                            @dblclick="open(item)">
                        <br>

                        {{item.name}}
                    </div>



                </el-main>
            </el-container>
        </el-container>

    </div>



</body>

</html>

<script>
    function pic_look2(url, type, name) {
        var file_src = decodeURI(url);
        var file_name = name != null ? name : file_src.substr(file_src.lastIndexOf("/") + 1);
        var file_type = type != null ? type : file_src.substr(file_src.lastIndexOf(".") + 1);
        file_type = file_type.toLowerCase();
        if (file_type == "pdf") {
            // jquery.media.js兼容firefox

            var ts = new Date().getTime();

            var tmphtml = "<a id ='Licence_Pdf_show" + ts + "' class='media' href='" + file_src + "'></a>"
            console.info(tmphtml);
            layer.open({
                shade: 0,
                type: 1,
                area: ['60%', '95%'],
                skin: 'lay_pic_look',
                maxmin: true,
                scrollbar: false,
                content: tmphtml,
                title: file_name,
                moveOut: true,
                move: '.layui-layer-content,.layui-layer-title'
            });
            $('#Licence_Pdf_show' + ts).media({ width: 800, height: 600 });
            $('#Licence_Pdf_show' + ts).css("width", "99%");
            $('#Licence_Pdf_show' + ts).css("height", "94%");
            $('iframe', '#Licence_Pdf_show' + ts).css("width", "100%");
            $('iframe', '#Licence_Pdf_show' + ts).removeAttr("width");
            $('iframe', '#Licence_Pdf_show' + ts).css("height", "100%");
            $('iframe', '#Licence_Pdf_show' + ts).removeAttr("height");

        } else if (file_type == "jpeg" || file_type == "jpg" || file_type == "png" || file_type == "gif") {
            var tmphtml = "<div style='text-align: center;'><img data-magnify='gallery' data-caption='" + file_name + "' data-src='" + encodeURI(file_src) + "' src='" + encodeURI(file_src) + "' class='album_pic_look'></div>";
            layer.open({
                type: 1,
                area: ['90%', '95%'],
                skin: 'lay_pic_look',
                maxmin: true,
                content: tmphtml,
                title: file_name,
                success: function (layero, index) {

                    $('[data-magnify=gallery]').magnify({ zIndex: 29999999, });

                    $('.album_pic_look').click();
                    $('.magnify-button-next').css("display", "none");
                    $('.magnify-button-prev').css("display", "none");
                    $('.magnify-stage').css("border", "none");

                    layer.close(index);
                }
            });
        } else {
            window.open(url);
        }
    }






    var app = new Vue({
        el: '#app',
        data: {
            //地址栏
            path: "",
            //左边的树
            folders: [],
            //主要操作对象
            files: [],

            //已有的图片类型
            imageType: new Set(["xlsx", "docx", "png", "pdf", "jpg"]),
            imageOpen: new Set(["png", "pdf", "jpg"]),
        },

        created: function () {


            this.initMenu();
        },


        methods: {

            initMenu() {

                this.$http.post("getAllFolder").then(function (response) {
                    this.folders = response.data
                    this.pathChange()
                });
            },

            newFolder() {
                var that = this;
                var name = prompt("请输入文件夹名称：");
                if (name == null) {
                    return;
                }
                this.$http.post("createFolder", { path: this.path + "/" + name }).then(function (response) {
                    this.pathChange()
                    this.initMenu();
                })

            },
            //新建excel
            newExcel() {
                var that = this;
                var name = prompt("请输入Excel名称：");
                if (name == null) {
                    return;
                }
                //打开
                var index = layer.open({
                    shade: 0,
                    type: 2,
                    maxmin: true,
                    fixed: false,
                    moveOut: true,
                    area: ['80%', "100%"],
                    content: "xlsx?path=" + this.path + "/" + name + ".xlsx&action=add",
                    btn: ['保存', '关闭'],
                    yes: function (index, layero) {
                        // if (!confirm("是否真的要保存?"))
                        //     return;

                        var iframeWin = window[layero.find('iframe')[0]['name']];

                        var res = iframeWin.save("file")
                        alert(res.message)
                        if (res.code == 1) {
                            layer.close(index);
                            that.pathChange();
                        }

                    }
                });


            },

            //双击打开
            open(item) {
                var that = this;
                console.info(item)
                if (item.isDirectory) {
                    this.path = item.fullPath
                    this.pathChange()
                } else if (item.type == "xlsx") {
                    //打开
                    var index = layer.open({
                        shade: 0,
                        type: 2,
                        maxmin: true,
                        fixed: false,
                        moveOut: true,
                        area: ['80%', "100%"],
                        content: "xlsx?path=" + item.fullPath,
                        btn: ['保存','下载', '关闭'],
                        yes: function (index, layero) {
                            // if (!confirm("是否真的要保存?"))
                            //     return;
                            var iframeWin = window[layero.find('iframe')[0]['name']];

                            var res = iframeWin.save("file")
                            alert(res.message)
                            if (res.code == 1) {
                                layer.close(index);
                                that.pathChange();
                            }
                        }, btn2: function(index, layero){
                            window.open("file?path=" + item.fullPath)
                        }
                    });
                    //  window.open("xlsx?path="+item.fullPath);
                } else if (this.imageOpen.has(item.type)) {
                    pic_look2("file?path=" + item.fullPath)
                }

            },

            //路径改变
            pathChange() {
                this.$http.post("getFolderAndFiles?path=" + this.path).then(function (response) {
                    var files = response.data

                    for (var f of files) {
                        if (f.isDirectory) {
                            f.imageType = "folder";
                        } else if (this.imageType.has(f.type)) {
                            f.imageType = f.type
                        } else {
                            f.imageType = "file"
                        }
                    }

                    this.files = files;
                });

            },
            //目录点击
            handleNodeClick(data) {
                console.log("handleNodeClick", data)
                this.path = data.fullPath
                this.pathChange();
            },


        }
    });

</script>